
<!DOCTYPE html>
<html lang="en" class="no-js">

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="description" content="">
	<meta name="keywords" content="">
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
	<link rel="stylesheet" href="/Public/static/css/amazeui.min.css">
	<link rel="stylesheet" href="/Public/static/css/app.css">
	<link rel="stylesheet" href="/Public/static/css/all.css">
	<title>身份信息</title>
	<link rel="stylesheet" href="/Public/static/css/common.css">
	<link rel="stylesheet" href="/Public/static/css/myinfo.css">
<style>
#sfz_zm_div,#sfz_fm_div,#sfz_sc_div{
	height: 100%;
}
#sfz_zm_div img,#sfz_fm_div img,#sfz_sc_div img{
	height: 100%;
	width: 100%;
}
</style>
</head>

<body>

	<div class="comm_top_nav" data-am-sticky="">
		<div class="am-g">
			<b>
				<div class="am-u-sm-2" onclick="javascript:window.location.replace(document.referrer);"><i
						class="am-icon-angle-left am-icon-fw"></i></div>
				<div class="am-u-sm-8">身份信息</div>
				<div class="am-u-sm-2"></div>
			</b>
		</div>

	</div>

	<div class="identity">
		<form action="" enctype="multipart/form-data">
			<div class="input_text_group">
				<div class="input_text_list">
					<div class="am-g">
						<div class="am-u-sm-4">真实姓名</div>
						<div class="am-u-sm-8">
							<input type="text" id="fullname" <if condition="$identity['name'] neq null">disabled</if> value="{$identity.name}"  placeholder="请输入真实姓名">
						</div>
					</div>
				</div>
				<div class="input_text_list">
					<div class="am-g">
						<div class="am-u-sm-4">身份证号</div>
						<div class="am-u-sm-8 f_number">
							<input type="text" id="sfzh" <if condition="$identity['idcard'] neq null">disabled</if> value="{$identity.idcard}" placeholder=" 请输入身份证号">
						</div>
					</div>
				</div>
			</div>

			<div class="upload_group">
				<div class="am-g">
					<div class="am-u-sm-12">
						<b>上传身份证照片</b>
					</div>
				</div>
				<div class="am-g">
					<div class="am-u-sm-6">
						<div class="upload_box">
							<div id="sfz_zm_div">
							   
							     <notempty name="identity.frontimg"><img src="{$identity.frontimg}"></notempty>
							</div>
							<input type="hidden" id="sfz_zm" value="{$identity.frontimg}"/>
							<div style="display:none;">
								<input type="file" id="sfz_zm_input" accept="image/*"
									onchange="uploadImg('front','sfz_zm','sfz_zm_div',this);" />
							</div>
							<if condition="$auth.status eq 0">
							<div class="upload_box_icon" onclick="Selfile('sfz_zm_input');">
								<i class="am-icon-camera am-icon-fw"></i>
							</div>
							</if>
							<span class="up_txt">上传身份证正面</span>
						</div>
					</div>
					<div class="am-u-sm-6">
						<div class="upload_box">
							<div id="sfz_fm_div">
							    <notempty name="identity.backimg">
							   <img src="{$identity.backimg}"></notempty></div>
							<input type="hidden" id="sfz_fm" value="{$identity.backimg}"/>
							<div style="display:none;">
								<input type="file" id="sfz_fm_input" accept="image/*"
									onchange="uploadImg('back','sfz_fm','sfz_fm_div',this);" />
							</div>
							<if condition="$auth.status eq 0">
							<div class="upload_box_icon" onclick="Selfile('sfz_fm_input');">
								<i class="am-icon-camera am-icon-fw"></i>
							</div>
							</if>
							<span class="up_txt">上传身份证反面</span>
						</div>
					</div>
				</div>
				<div class="am-g">
					<div class="am-u-sm-6">
						<div class="upload_box">
							<div id="sfz_sc_div">
							         <notempty name="identity.personimg">
							        <img src="{$identity.personimg}"></notempty></div>
							<input type="hidden" id="sfz_sc" value="{$identity.personimg}" />
							<div style="display:none;">
								<input type="file" id="sfz_sc_input" accept="image/*"
									onchange="uploadImg('person','sfz_sc','sfz_sc_div',this);" />
							</div>
							<if condition="$auth.status eq 0">
							<div class="upload_box_icon" onclick="Selfile('sfz_sc_input');">
								<i class="am-icon-camera am-icon-fw"></i>
							</div>
							</if>
							<span class="up_txt">上传手持身份证</span>
						</div>
					</div>
				</div>
			</div>

			<div class="standard">
				<div class="am-g">
					<div class="am-u-sm-12">
						<b>上传标准：须本人身份证且清晰可辨,确认拍照权限已开启,用手机相机拍照以后上传,如若上传无反应请稍等片刻即可或重新退出APP重试</b>
					</div>
				</div>
				<div class="am-g">
					<div class="am-u-sm-12" style="margin: 15px 0 0;">
						<img src="/Public/static/image/standard.png" class="am-img-responsive" alt="">
					</div>
				</div>
			</div>

			<div class="fix_bottom">
				<div class="am-g">
					<button type="button" class="am-btn am-btn-block" <if condition="$identity['idcard'] neq null">disabled</if> id="identity-button" onclick="saveInfo();">
						确认提交
					</button>
				</div>
			</div>
		</form>
	</div>

	<div class="message">
		<p></p>
	</div>
<script type="text/javascript">
		//本脚本解决点击后跳出safari的问题
		(function(){	
			if ("standalone" in window.navigator && window.navigator.standalone) {
				var d, l = false;
				document.addEventListener("click", function(i) {
					d = i.target;
					while (d.nodeName !== "A" && d.nodeName !== "HTML") d = d.parentNode;
					//if ("href" in d && d.href.indexOf("http") !== -1 && (d.href.indexOf(document.location.host) !== -1 || l)) {
					if ("href" in d && d.href.indexOf("http") !== -1 ) {
						i.preventDefault();
						document.location.href = d.href
					}
				}, false)
			}
		}());
		
		</script>

	<script type="text/javascript">
		document.documentElement.addEventListener('touchmove', function (event) {
			if (event.touches.length > 1) {
				event.preventDefault();
			}
		}, false);
	</script>



	<!--[if (gte IE 9)|!(IE)]><!-->
	<script src="/Public/static/js/jquery3.2.min.js"></script>
	<!--<![endif]-->
	<script src="/Public/static/js/amazeui.min.js"></script>

	<script type="text/javascript">
		var isupload = false;
		//判断如果已经上传了图片就显示
		var sfz_zm = "";
		var sfz_fm = "";
		var sfz_sc = "";
		if (sfz_zm != '') {
			$("#sfz_zm").val(sfz_zm);
			$("#sfz_zm_div").html('<img src="' + sfz_zm + '">');
		}
		if (sfz_fm != '') {
			$("#sfz_fm").val(sfz_fm);
			$("#sfz_fm_div").html('<img src="' + sfz_fm + '">');
		}
		if (sfz_sc != '') {
			$("#sfz_sc").val(sfz_sc);
			$("#sfz_sc_div").html('<img src="' + sfz_sc + '">');
		}

		$('#sel').change(function () {
			change('sel', 'sela')
		});
		$('.inputblur').click(function () {
			$(this).blur();
			$('.nofocus').blur();
		});

		// 弹窗

		// 倒计时
		function myTimer() {
			var sec = 3;
			var timer;
			clearInterval(timer);
			timer = setInterval(function () {
				console.log(sec--);
				if (sec == 1) {
					$(".message").addClass("m-hide");
					$(".message").removeClass("m-show");
				}
				if (sec == 0) {
					$(".message").hide();
					$(".message").removeClass("m-hide");
					clearInterval(timer);
				}
			}, 1000);
		}

		// 弹窗内容
		function message(data) {
			msg = $(".message p").html(data);
			$(".message").addClass("m-show");
			$(".message").show();

			myTimer();

		}

		// 初始化弹窗
		function mesg_default() {
			msg = '';
			$(".message").hide();
			$(".message").removeClass("m-show");
			$(".message").removeClass("m-hide");
		}

		function Selfile(inputid) {
			if (isupload != false) {
				message("其他文件正在上传...请稍后");
			} else {
				$("#" + inputid).click();
			}
		}
	 
	 //图片进行压缩
    function compress(img) {
        var canvas = document.createElement("canvas");
        var ctx = canvas.getContext('2d');
        
        // 瓦片canvas
        var tCanvas = document.createElement("canvas");
        var tctx = tCanvas.getContext("2d");
        var maxsize = 100 * 1024;

        var initSize = img.src.length;
        var width = img.width;
        var height = img.height;

        //如果图片大于四百万像素，计算压缩比并将大小压至400万以下
        var ratio;
        if ((ratio = width * height / 4000000)>1) {
            ratio = Math.sqrt(ratio);
            width /= ratio;
            height /= ratio;
        }else {
            ratio = 1;
        }

        canvas.width = width;
        canvas.height = height;

//        铺底色
        ctx.fillStyle = "#fff";
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        //如果图片像素大于100万则使用瓦片绘制
        var count;
        if ((count = width * height / 1000000) > 1) {
            count = ~~(Math.sqrt(count)+1); //计算要分成多少块瓦片

//            计算每块瓦片的宽和高
            var nw = ~~(width / count);
            var nh = ~~(height / count);

            tCanvas.width = nw;
            tCanvas.height = nh;

            for (var i = 0; i < count; i++) {
                for (var j = 0; j < count; j++) {
                    tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh);

                    ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh);
                }
            }
        } else {
            ctx.drawImage(img, 0, 0, width, height);
        }

        //进行最小压缩image/jpeg
        var ndata = canvas.toDataURL("image/jpeg", 0.1);

        console.log("压缩前：" + initSize);
        console.log("压缩后：" + ndata.length);
        console.log("压缩率：" + ~~(100 * (initSize - ndata.length) / initSize) + "%");

        tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;

        return ndata;
    }
     function upload(basestr, file,fileName,now,hiddenid,divid) {
     	//type=file.type
		type="image/jpeg";
		console.log(type);
        var text = window.atob(basestr.split(",")[1]);
        var buffer = new ArrayBuffer(text.length);
        var ubuffer = new Uint8Array(buffer);
        var pecent = 0 , loop = null;

        for (var i = 0; i < text.length; i++) {
            ubuffer[i] = text.charCodeAt(i);
        }

        var Builder = window.WebKitBlobBuilder||window.MozBlobBuilder;
        var blob;

        if (Builder) {
            var builder = new Builder();
            builder.append(buffer);
            blob = builder.getBlob(type);
        } else {
            blob = new window.Blob([buffer], {type: type});
        }
         var formdata = new FormData();
        formdata.append(fileName, blob,file.name);
		formdata.append("fileName", fileName);
         $.ajax({
            url:'{:U('Info/uploadImg')}',
            type:'POST',
            dataType : "json",
            data:formdata,
            cache: false,
            contentType: false,        /* 不可缺 */
            processData: false,         /* 不可缺 */
            success:function(data){
              
               var obj = $(now).parent(); 
              
					if(data.status != 1){
						message(data.info);
						return false;
					}else{
						
						var imgUrl = "__PUBLIC__/Upload/" + data.info;
						
					     
							$("#" + divid).html('<img src="' + imgUrl + '">');
							$("#" + hiddenid).val(imgUrl);
						 
					 
					}
            }
        });
       
		 
			 
} 


 //上传成功响应
        function uploadComplete(e) {
            $("#text1").css("display", "none");
            $("#text2").css("display", "block");
             console.log("上传成功,后台正在校验" );
        }
        //上传失败
        function uploadFailed(e) {
           console.log("上传失败" );
        }

		function uploadImg(loadName,hiddenid, divid, obj) {
			var filename = $(obj).val();
			if (filename != '' && filename != null) {
				isupload = true;
				var pic = $(obj)[0].files[0];
			 var maxsize = 100 * 1024;
			 
			 
			 
			 var file =  $(obj)[0].files[0];
		 
			 
				
				
		   var reader = new FileReader();
            reader.onload = function () {
                 var result = this.result;
                 var img = new Image();
                 img.src = result;
				 var fileblob=null;
                 //如果图片大小小于200kb，则直接上传
                
                 if (result.length <= maxsize) {
                     upload(result, file,loadName,obj,hiddenid, divid);
                    return;
                 }
 
 //                图片加载完毕之后进行压缩，然后上传
                 if (img.complete) {
                     callback();
                 } else {
                     img.onload = callback;
                 }
 
                 function callback() {
                     var data = compress(img);
                  upload(data,file,loadName,obj,hiddenid, divid);
                    
                    
                    
                 }
             };
			
             reader.readAsDataURL(file);
			 
				isupload = false;
			}
			isupload = false;
		}

		function checkval(val_) {
			if (val_ == '' || val_ == null) {
				return false;
			} else {
				return true;
			}
		}
		
		// 身份证
		function checksfz(val_) {
			var sfz_zz = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
			if (sfz_zz.test(val_)) {
				return true;
			} else {
				return false;
			}
		}
		
		// 姓名正则
		function checkname(val_) {
			var name_zz = /^[\u4E00-\u9FA5]{2,6}$/;
			if (name_zz.test(val_)) {
				return true;
			} else {
				return false;
			}
		}

		//保存资料
		function saveInfo() {
			var name = $("#fullname").val();
			var card = $("#sfzh").val();
			var cardphoto_1 = $("#sfz_zm").val();
			var cardphoto_2 = $("#sfz_fm").val();
			var cardphoto_3 = $("#sfz_sc").val();
			if(!checkname(name))
			{
			    	message("姓名验证错误，注意空格!");
			    	return;
			    
			}
			if(!checksfz(card))
			{
			    	message("身份证验证错误!");
			    	return;
			}
			if (checkval(name) && checkval(card) && checkval(cardphoto_1) && checkval(cardphoto_2) && checkval(cardphoto_3) && checksfz(card) && checkname(name)) {
				$.post(
					"{:U('Info/identityAuth')}",
					{
						realName: name,
						idCard: card,
						front: cardphoto_1,
						back: cardphoto_2,
						person: cardphoto_3
					},
					function (data, state) {
						if(data.status != 1){
							message(data.info);
					 
						} else {
								message(data.info);
								if(data.url != ""){
        							setTimeout(function(){
        								window.location.href = data.url;
        							},2000);
        						}
						}
					}
				);
			} else {
				message("资料填写不完整,请检查!");
			}
		}

	</script>


</body>

</html>